import React from 'react';
import PropTypes from 'prop-types';
import {Card, Button, Row, Col, Table, Icon, Spin} from 'antd';
import {TABLE, DATE_FORMAT} from '../../constants';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
import routes from '../routes';
import {injectIntl} from '../intl';
import {lcKind, lcStatus, currency, lcPayMentDays, lcOfficialDraftType} from '../../Enum';
import {conventEnumValueToString, formatDateTime, formatAmount} from '../../utils';
import {getDetailHistory} from '../api';
import styles from '../style.css';
const {Description} = DescriptionList;
export class DetailHistory extends React.PureComponent {
    state = {
        loading: false,
        data: {},
    }
    componentDidMount() {
        this.getDetailInfo(this.props.id);
    }
    getDetailInfo = id => {
        this.setState({loading: true});
        getDetailHistory(id)
            .then(res => {
                if(res.ok)
                    this.setState({
                        loading: false,
                        data: res.data,
                        selects: [{
                            id: '9',
                            name: this.props.intl.formatMessage({
                                id: 'detailHistory.form.issueBank',
                                defaultMessage: '开证银行'
                            }),
                            value: res.data.issueBank,
                            select: res.data.issueBankIsApprove
                        }, {
                            id: '10',
                            name: this.props.intl.formatMessage({
                                id: 'detailHistory.form.lcKind',
                                defaultMessage: '信用证类型'
                            }),
                            value: conventEnumValueToString(lcKind, res.data.lcKind),
                            select: res.data.lcKindIsApprove
                        }, {
                            id: '1',
                            name: this.props.intl.formatMessage({
                                id: 'detailHistory.form.issuePrice',
                                defaultMessage: '开证金额'
                            }),
                            value: formatAmount(res.data.issuePrice),
                            select: res.data.issuePriceIsApprove
                        }, {
                            id: '2',
                            name: this.props.intl.formatMessage({
                                id: 'detailHistory.form.shippingPortName',
                                defaultMessage: '发货港'
                            }),
                            value: res.data.shippingPortName,
                            select: res.data.shippingPortIsApprove
                        }, {
                            id: '3',
                            name: this.props.intl.formatMessage({
                                id: 'detailHistory.form.destinationPort',
                                defaultMessage: '目的港'
                            }),
                            value: res.data.destinationPort,
                            select: res.data.destinationPortIsApprove
                        }, {
                            id: '4',
                            name: this.props.intl.formatMessage({
                                id: 'detailHistory.form.lastLoadDate',
                                defaultMessage: '最迟装船日期'
                            }),
                            value: formatDateTime(res.data.lastLoadDate, DATE_FORMAT),
                            select: res.data.lastLoadDateIsApprove
                        }, {
                            id: '5',
                            name: this.props.intl.formatMessage({
                                id: 'detailHistory.form.dateOfExpiry',
                                defaultMessage: '效期'
                            }),
                            value: formatDateTime(res.data.dateOfExpiry, DATE_FORMAT),
                            select: res.data.dateOfExpiryIsApprove
                        }, {
                            id: '6',
                            name: this.props.intl.formatMessage({
                                id: 'detailHistory.form.placeOfExpiry',
                                defaultMessage: '效地'
                            }),
                            value: res.data.placeOfExpiry,
                            select: res.data.placeOfExpiryIsApprove
                        }, {
                            id: '7',
                            name: this.props.intl.formatMessage({
                                id: 'detailHistory.form.lcPayMentDays',
                                defaultMessage: '信用证账期'
                            }),
                            value: conventEnumValueToString(lcPayMentDays, res.data.lcPayMentDays),
                            select: res.data.lcPayMentDaysMarketDepartmentIsApprove
                        }, {
                            id: '8',
                            name: this.props.intl.formatMessage({
                                id: 'detailHistory.form.commodityDescription',
                                defaultMessage: '货描'
                            }),
                            value: res.data.commodityDescription,
                            select: res.data.commodityDescriptionIsApprove
                        }]
                    });
                else
                    this.setState(({
                        loading: false
                    }));
            });
    }
    onClickPreviousEdition = e => {
        const id = e.target.id;
        this.getDetailInfo(id);
    }
    onClickNextEdition = e => {
        const id = e.target.id;
        this.getDetailInfo(id);
    }
    render() {
        const {formatMessage} = this.props.intl;
        const {data, selects} = this.state;
        const Yes = formatMessage({
            id: 'detailPage.yes',
            defaultMessage: '是'
        });
        const No = formatMessage({
            id: 'detailPage.no',
            defaultMessage: '否'
        });
        const columSelect = [{
            title: formatMessage({
                id: 'detailHistory.column.name',
                defaultMessage: '标题'
            }),
            dataIndex: 'name',
            width: 200
        }, {
            title: formatMessage({
                id: 'detailHistory.column.value',
                defaultMessage: '数据'
            }),
            dataIndex: 'value',
            width: 400
        }, {
            title: <span className="ant-form-item-required">{formatMessage({
                id: 'detailHistory.column.select',
                defaultMessage: '选择'
            })}</span>,
            dataIndex: 'select',
            render: text => text ? <Icon type="check"/> : null
        }];
        
        const operations = [];
        if(data.previousEditionId)
            operations.push(<Button key="previousEditionId" id={data.previousEditionId} onClick={this.onClickPreviousEdition} size="small">{
                formatMessage({
                    id: 'detailPage.btn.previousEditionId',
                    defaultMessage: '上一版'
                })
            }</Button>);
        if(data.nextEditionId)
            operations.push(<Button key="nextEditionId" id={data.nextEditionId} onClick={this.onClickNextEdition} size="small">{
                formatMessage({
                    id: 'detailPage.btn.nextEditionId',
                    defaultMessage: '下一版'
                })
            }</Button>);
        return (
            <div>
                <Spin spinning={this.state.loading} className="detail">
                    <Card loading={this.state.loading}>
                        <DescriptionList size="large" title={<Row><Col span={6}>{formatMessage({
                            id: 'detailHistory.text.title',
                            defaultMessage: '信用证信息'
                        })}</Col>
                        <Col className={`col-align-right ${styles.detail}`} span={18}>{operations}</Col>
                        </Row>}>
                            <Description term={formatMessage({
                                id: 'detailHistory.text.lcCode',
                                defaultMessage: '信用证号码'
                            })}>{data.lcCode}</Description>
                            <Description term={formatMessage({
                                id: 'detailHistory.text.brandCode',
                                defaultMessage: '品牌编号'
                            })}>{data.brandCode}</Description>
                            <Description term={formatMessage({
                                id: 'detailHistory.text.brandName',
                                defaultMessage: '品牌名称'
                            })}>{data.brandName}</Description>
                            <Description term={formatMessage({
                                id: 'detailHistory.text.dealerCode',
                                defaultMessage: '总代编号'
                            })}>{data.dealerCode}</Description>
                            <Description term={formatMessage({
                                id: 'detailHistory.text.dealerName',
                                defaultMessage: '总代名称'
                            })}>{data.dealerName}</Description>
                            <Description term={formatMessage({
                                id: 'detailHistory.text.issueCountryChineseName',
                                defaultMessage: '开证国家'
                            })}>{data.issueCountryChineseName}</Description>
                            <Description term={formatMessage({
                                id: 'detailHistory.text.issueBank',
                                defaultMessage: '开证银行'
                            })}>{data.issueBank}</Description>
                            <Description term={formatMessage({
                                id: 'detailHistory.text.issuePrice',
                                defaultMessage: '开证金额'
                            })}>{formatAmount(data.issuePrice)}</Description>
                            <Description term={formatMessage({
                                id: 'detailHistory.text.currency',
                                defaultMessage: '币种'
                            })}>{conventEnumValueToString(currency, data.currency)}</Description>
                            <Description term={formatMessage({
                                id: 'detailHistory.text.lcPayMentDays',
                                defaultMessage: '信用证账期'
                            })}>{conventEnumValueToString(lcPayMentDays, data.lcPayMentDays)}</Description>
                            <Description term={formatMessage({
                                id: 'detailHistory.text.shippingPortName',
                                defaultMessage: '发货港口'
                            })}>{data.shippingPortName}</Description>
                            <Description term={formatMessage({
                                id: 'detailHistory.text.destinationPort',
                                defaultMessage: '目的港口'
                            })}>{data.destinationPort}</Description>
                            <Description term={formatMessage({
                                id: 'detailHistory.text.issueDate',
                                defaultMessage: '开证日期'
                            })}>{formatDateTime(data.issueDate, DATE_FORMAT)}</Description>
                            <Description term={formatMessage({
                                id: 'detailHistory.text.lastLoadDate',
                                defaultMessage: '最迟装船日期'
                            })}>{formatDateTime(data.lastLoadDate, DATE_FORMAT)}</Description>
                            <Description term={formatMessage({
                                id: 'detailHistory.text.dateOfExpiry',
                                defaultMessage: '效期'
                            })}>{formatDateTime(data.dateOfExpiry, DATE_FORMAT)}</Description>
                            <Description term={formatMessage({
                                id: 'detailHistory.text.placeOfExpiry',
                                defaultMessage: '效地'
                            })}>{data.placeOfExpiry}</Description>
                            <Description term={formatMessage({
                                id: 'receivePanel.text.lcOfficialDraftType',
                                defaultMessage: '正本草本'
                            })}>{conventEnumValueToString(lcOfficialDraftType, data.lcOfficialDraftType)}</Description>
                            <Description term={formatMessage({
                                id: 'detailHistory.text.isAllowBatch',
                                defaultMessage: '是否允许分批'
                            })}>{data.isAllowBatch ? Yes : No}</Description>
                            <Description term={formatMessage({
                                id: 'detailHistory.text.isAllowTransfer',
                                defaultMessage: '是否允许转运'
                            })}>{data.isAllowTransfer ? Yes : No}</Description>
                            <Description term={formatMessage({
                                id: 'detailHistory.text.quantity',
                                defaultMessage: '件数'
                            })}>{data.quantity}</Description>
                            <Description term={formatMessage({
                                id: 'detailHistory.text.lcKind',
                                defaultMessage: '信用证类型'
                            })}>{conventEnumValueToString(lcKind, data.lcKind)}</Description>
                            <Description term={formatMessage({
                                id: 'detailHistory.text.lcStatus',
                                defaultMessage: '信用证状态'
                            })}>{conventEnumValueToString(lcStatus, data.lcStatus)}</Description>
                            <Description term={formatMessage({
                                id: 'detailHistory.text.creatorName',
                                defaultMessage: '创建人姓名'
                            })}>{data.creatorName}</Description>
                            <Description term={formatMessage({
                                id: 'detailHistory.text.createTime',
                                defaultMessage: '创建时间'
                            })}>{formatDateTime(data.createTime, DATE_FORMAT)}</Description>
                            <Description term={formatMessage({
                                id: 'detailHistory.text.modifierName',
                                defaultMessage: '修改人姓名 '
                            })}>{data.modifierName}</Description>
                            <Description term={formatMessage({
                                id: 'detailHistory.text.modifyTime',
                                defaultMessage: '修改时间'
                            })}>{formatDateTime(data.modifyTime, DATE_FORMAT)}</Description>
                            <Description term={formatMessage({
                                id: 'detailHistory.text.abandonerName',
                                defaultMessage: '作废人姓名 '
                            })}>{data.abandonerName}</Description>
                            <Description term={formatMessage({
                                id: 'detailHistory.text.abandonTime',
                                defaultMessage: '作废时间'
                            })}>{formatDateTime(data.abandonTime, DATE_FORMAT)}</Description>
                            <Description term={formatMessage({
                                id: 'detailHistory.text.commodityDescription',
                                defaultMessage: '货描'
                            })}>{data.commodityDescription}</Description>
                            <Description term={formatMessage({
                                id: 'detailHistory.text.remark',
                                defaultMessage: '备注'
                            })}>{data.remark}</Description>
                        </DescriptionList>
                    </Card>
                    <Card title={formatMessage({
                        id: 'detailHistory.card.approvetitle',
                        defaultMessage: '审核项目'
                    })}>
                        <Table
                            className="white-space-nowrap"
                            columns={columSelect}
                            rowKey="id"
                            pagination={false}
                            dataSource={selects}
                            {...TABLE} />
                    </Card>
                </Spin>
                <div className="page-toolbar">
                    <Button
                        type="primary"
                        disabled={this.state.loading}
                        onClick={this.props.onCancel}>{formatMessage({
                            id: 'detailHistory.text.return',
                            defaultMessage: '返回'
                        })}</Button>
                </div>
            </div>
        );
    }
}

DetailHistory.propTypes = {
    id: PropTypes.string.isRequired,
    permissions: PropTypes.array.isRequired,
    onCancel: PropTypes.func.isRequired,
    history: PropTypes.object,
    intl: PropTypes.object,
};

import {connect} from 'react-redux';
import selectorFactory from 'Shared/utils/immutableToJsSelectorFactory';
const getPermissions = selectorFactory(['page', 'domainData', 'permission', 'data']);


const mapStateToProps = (state, props) => ({
    id: props.id,
    permissions: getPermissions(state),
});
const mapDispatchToProps = (dispatch, props) => ({
    onCancel: () => {
        props.history.push(routes.history.url());
    },
});
export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(DetailHistory));
